<template>
  <div class="app-container">
    <p class="name">无极县幼儿园分布图</p>
    <div ref="mapDom" class="map_dom"></div>
    <el-dialog
      title="园所信息"
      :visible.sync="open"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="dialog-box">
        <p>
        园所名称:
        <span>
          {{ school.title }}
        </span>
      </p>
      <p>
        地址:
        <span>
          {{ school.address }}
        </span>
      </p>
      <p>
        建校日期:
        <span>
          {{ school.startDate }}
        </span>
      </p>
      <p>
        开园日期:
        <span>
          {{ school.openDate }}
        </span>
      </p>
      <p>
        开设班级:
        <span>
          {{ school.openClass }}
        </span>
      </p>
      <p>
        幼儿人数:
        <span>
          {{ school.kids }}
        </span>
      </p>
      <p>
        教职工人数:
        <span>
          {{ school.staffs }}
        </span>
      </p>
      <p>
        地区类型:
        <span v-html="school.nature == '0' ? '城园区' : school.nature == '1' ? '乡镇园' : '农村园'">
        </span>
      </p>
      <p>
        等级:
        <span v-html="school.level == '1' ? '一级' : school.level == '2' ? '二级' : '三级'">
        </span>
      </p>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mapJSON from "./mapJson";
import { schoolList, schoolID, selectBaseSchoolInfo } from "@/api/qu/ysgl";
export default {
  name: "ysgyxx",
  data() {
    return {
      mapJSON,
      code: "无极县",
      // 地图
      mapInstance: null,
      schoolLevelOptions: [],
      allData: [
        //  {name: '无极县幼儿园',departmentnames: ["幼儿园"],value:[ 114.972375,38.180432],itemStyle: { color: '#f56321' }},
        // //  {name: '弘德幼儿园',departmentnames: ["幼儿园"],value:[ 114.817994,38.017434],itemStyle: { color: '#f56321' }},
        //  {name: '爱森堡国际幼儿园',departmentnames: ["幼儿园"],value:[ 114.975348,38.180289],itemStyle: { color: '#f56321' }},
        // //  {name: '小贵族双语幼儿园',departmentnames: ["幼儿园"],value:[ 114.972922,38.168971],itemStyle: { color: '#f56321' }},
        //  {name: '金种子幼儿园',departmentnames: ["幼儿园"],value:[ 114.987233,38.179112],itemStyle: { color: '#f56321' }},
        // //  {name: '天骄双语幼儿园',departmentnames: ["幼儿园"],value:[ 114.969953,38.171559],itemStyle: { color: '#f56321' }},
        // //  {name: '伊顿国际幼儿园',departmentnames: ["幼儿园"],value:[ 114.960195,38.172028],itemStyle: { color: '#f56321' }},
        //  {name: '佳育幼儿园',departmentnames: ["幼儿园"],value:[ 114.904361,38.093987],itemStyle: { color: '#f56321' }},
        //  {name: '金太阳幼儿园',departmentnames: ["幼儿园"],value:[ 115.0514,38.24555],itemStyle: { color: '#f56321' }},
        //  {name: '智慧树幼儿园',departmentnames: ["幼儿园"],value:[ 114.872286,38.095171],itemStyle: { color: '#f56321' }},
        // //  {name: '飞博幼儿园',departmentnames: ["幼儿园"],value:[ 114.974001,38.172037],itemStyle: { color: '#f56321' }},
        //  {name: '金太阳幼儿园',departmentnames: ["幼儿园"],value:[ 115.0514,38.24555],itemStyle: { color: '#f56321' }},
        //  {name: '启智幼儿园',departmentnames: ["幼儿园"],value:[ 114.957831,38.155022],itemStyle: { color: '#f56321' }},
      ],
      open: false,
      school: {
        name: "张三",
        age: "5",
        sex: "男",
        class: "小二班",
        father: "张一",
        mother: "王五",
        medicalHistory: "关于病史的信息",
      },
    };
  },
  created() {
    this.getDicts("school_level").then((response) => {
      this.schoolLevelOptions = response.data;
    });
  },
  mounted() {
    this.getschoolList();
    this.mapInstance = this.$echarts.init(this.$refs.mapDom);
    // this.mapechartsFun(this.mapJSON[this.code])
  },
  methods: {
    //园所列表
    async getschoolList() {
      try {
        const data = await schoolList({});
        this.allData = data.rows;
        this.allData.forEach((item) => {
          item.name = item.title;
          item["value"] = [item.lng, item.lat];
        });
        //  console.log( this.allData);
        this.mapechartsFun(this.mapJSON[this.code]);
      } catch (error) {
        console.log(error);
      }
    },
    mapechartsFun(data) {
      this.$echarts.registerMap("WJX", data);
      const option = {
        backgroundColor: "transparent", //背景色
        geo: {
          //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
          map: "WJX", //地图类型  这儿展示的是中国地图
          aspectScale: 1.5,
          zoom: 0.91,
          //  bottom:'2%',
          selectedMode: "single", // 开启单选
          label: {
            show: false, //是否显示标签  此处指是否显示地图上的地区名字
            color: "#ffffff",
            fontSize: 14,
          },
          roam: true, //是否开启鼠标缩放和平移漫游
          itemStyle: {
            areaColor: "#03365b",
            borderColor: "#4bf3f9",
            shadowColor: "#03365b", //阴影颜色
            shadowOffsetX: 0, //阴影偏移量
            shadowOffsetY: 5, //阴影偏移量
          },
          emphasis: {
            label: {
              show: false,
              color: "#ffffff",
            },
            itemStyle: {
              areaColor: "#03365b",
            },
          },
        },
        // legend: {
        //   left: '5%',
        //   bottom: '5%',
        //   orient:'vertical' // 可选提示竖向排列
        // },

        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            data: this.allData,
            rippleEffect: {
              brushType: "stroke",
              scale: 5,
              period: 2, // 秒数
            },

            symbolSize: 12,
            symbolRotate: 35,
            clickable: false,
            // hoverAnimation: true,
            zlevel: 1,
            label: {
              normal: {
                formatter: "{b}",
                position: "top",
                show: true,
                color: "#fff",
                offset: [0, 40],
              },
            },
            itemStyle: {
              normal: {
                // color:'#c23531',
                color: "#c23531",
              },
            },
            select: {
              itemStyle: {
                borderColor: "#4bf3f9",
                borderWidth: "2",
                color: "#03365b",
                areaColor: "#03365b", //设置地图点击后的颜色
              },
            },
            emphasis: {
              borderWidth: 0,
              borderColor: "transparent",
              //高亮区域颜色
              areaColor: "#03365b",
            },
          },
        ],
      };
      this.mapInstance.off("click");
      this.mapInstance.on("click", (e) => {
        this.code = e.name;
        if (this.code != "无极县") {
          this.getschoolID(e.data.id);
        }
      });
      this.mapInstance.setOption(option);
      window.addEventListener("resize", this.monitorResize);
    },
    //具体园所信息
    async getschoolID(id) {
      try {
        const obj = {
          id: id,
        };
        const { data } = await selectBaseSchoolInfo(obj);
        this.school = data;
        this.school.levels = this.schoolLevelFormat(this.school);
        //  console.log(this.school);
        this.open = true;
      } catch (error) {
        console.log(error);
      }
    },
    //地图监听窗口缩放事件
    monitorResize() {
      this.mapInstance.resize();
    },
    // 区角类型字典翻译
    schoolLevelFormat(row) {
      return this.selectDictLabel(this.schoolLevelOptions, row.level);
    },
    // 关闭确定按钮
    cancel() {
      this.open = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.name {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.map_dom {
  width: 100%;
  height: 730px;
}
.dialog-box{
  margin-left: 30px;
   &>p{
    font-weight: 600;
    font-size: 16px;
  }

}
</style>
